<script setup lang="ts">
import searchBar from '@/components/searchBar/searchBar.vue'
import workerCard from '@/components/workerChoose/workerCard.vue'
import serviceModal from '@/components/serviceModal/serviceModal.vue'
import { onMounted, reactive, ref } from 'vue'
import { meiYeWorkerSvcProviderList } from '@/api/SvcProvider'
import { appStore } from '@/stores/appStore/appStore'
import { isNotEmpty, isEmpty } from '@/util/localTool'
import { pageList } from '@/util/bussinessTool'
import { throttle } from '@/util/localTool'
const props = defineProps({
    projectId: {
        type: String,
        default: ""
    }
})
const cityName = ref('未定位')
const showServiceModal = ref(false)
const searchContent = ref('')
const workerList = ref()
const workerPage = reactive(new pageList(meiYeWorkerSvcProviderList))
const app = appStore()
//初始化cityName
onMounted(() => {
    type providerList = {
        cityName: string,
        id: string,
    }
    let item = app.providerList.find((item: providerList) => {
        return item.id === app.svcProviderId
    })
    if (item) {
        cityName.value = item.cityName
    }
})
function selectCity(e: string) {
    if (cityName.value !== e) {
        cityName.value = e
        getPageData()
    }
}

const loadData = function () {
    throttle(getPageData(), 500)
}

function setPageParams() {
    return {
        name: searchContent.value,
        svcProviderId: app.svcProviderId,
        curLongitude: app.location.longitude,
        curLatitude: app.location.latitude,
        projectId: props.projectId
    }
}

const getPageData = function (value = 'refresh') {
    let params = setPageParams()
    if (value === 'refresh') {
        workerPage.resetPage()
        workerPage.loadState = 'loading'
        workerList.value = []
    }
    workerPage.getData(params).then((res: any) => {
        if (isEmpty(app.svcProviderId)) {
            app.svcProviderId = res.data.svcProvider.id
        }
        if (isNotEmpty(res.data.svcProvider)) {
            cityName.value = res.data.svcProvider.cityName
        }
        if (isEmpty(res.data.page.records)) {
            workerPage.loadState = isEmpty(workerList.value) ? 'noData' : 'done'
            return
        }
        let records = res.data.page.records
        if (value === 'refresh') {
            workerList.value = records
        } else {
            workerList.value = workerList.value.concat(records)
        }
        workerPage.loadState = 'done'
        workerPage.pageData.current = records.length === 0 ? workerPage.pageData.current : (res.data.page.current + 1)
    }).catch(() => {
        workerPage.loadState = 'erro'
    })
}

function onOrder(value:any) {
    showServiceModal.value = true
}
function payOrder(){
    console.info('下单')
}
defineExpose({
    loadData
})
</script>
<template>
    <searchBar :city-name="cityName" v-model="searchContent" @on-change="selectCity" @on-cancel="getPageData"
        @on-search="getPageData" />
    <pageLoading :load-state="workerPage.loadState" class="pageLoading">
        <template #default>
            <div class="divide-y divide-gray-100">
                <workerCard v-for="item in workerList" :data="item" @click="onOrder(item)"></workerCard>
            </div>
            <div class="text-center	i-text-13 i-my-20 text-gray-300">没有更多数据了</div>
        </template>
    </pageLoading>
    <serviceModal v-model:show="showServiceModal" @to-order="payOrder"/>
</template>
<style scoped>
.pageLoading {
    height: calc(100% - 54px);
}
</style>